<template>
    <div>
        <page-header :title="$route.meta.title" content="" />
        <page-main>
            <el-button style="margin-bottom: 10px;" type="primary" icon="el-icon-plus" @click="onCreate">新增直播间</el-button>

            <search-bar>
                <el-form :model="form" size="small" label-width="100px" label-suffix="：">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="名称">
                                <el-input v-model="form.name" placeholder="请输入名称" clearable @keydown.enter.native="refresh" @clear="refresh" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </search-bar>

            <el-table ref="table" v-loading="loading" class="list-table" :data="listData" border stripe highlight-current-row>
                <el-table-column prop="id" width="70" align="center" label="直播id" />
                <el-table-column prop="number" align="center" label="直播账号" />
                <el-table-column label="图片" align="center">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.cover" :preview-src-list="[scope.row.cover]" style="width: 50px; height: 50px;" />
                    </template>
                </el-table-column>

                <el-table-column prop="name" label="直播标题" align="center" />
                <el-table-column prop="start_at" label="直播时间" align="center" />
                <el-table-column label="货品清单" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" plain @click="onView(scope.row)">查看详情</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="场次数据" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" plain @click="onView(scope.row)">查看详情</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="215">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" plain style="margin-right: 5px;" @click="govideo(scope.row.id)">进入直播间</el-button>
                        <el-dropdown>
                            <el-button plain size="mini">
                                更多<i class="el-icon-arrow-down el-icon--right" />
                            </el-button>
                            <el-dropdown-menu slot="dropdown" class="down">
                                <!-- <el-button type="primary" size="mini" plain >编辑</el-button> -->
                                <!-- <el-button type="danger" size="mini" class="del" plain >删除</el-button> -->
                                <el-dropdown-item @click.native="onEdit(scope.row)">编辑</el-dropdown-item>
                                <el-dropdown-item @click.native="onDel(scope.row)">删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                :current-page.sync="page.page"
                :total="page.total"
                :page-size.sync="page.size"
                :page-sizes.sync="page.sizes"
                layout="total, sizes, ->, prev, pager, next, jumper"
                background
                @size-change="refresh"
                @current-change="getDataList"
            />
        </page-main>

        <FormDialog :id="detailFormDialog.id" :visible.sync="detailFormDialog.visible" :view="formView" @success="getDataList" />
    </div>
</template>

<script>
import mixin from '@/mixins/mixin'
import FormDialog from './components/FormDialog/index.vue'

export default {
    components: {
        FormDialog
    },
    mixins: [mixin],
    data() {
        return {
            dialogMode: false,
            pageRouter: {
                create: 'liveBroAdd',
                edit: 'liveBroEdit'
            },
            form: {
                username: '',
                nickname: '',
                mobile: ''
            },
            api: {
                list: '/live/live/tabulation',
                del: 'product/business-classify/delete',
                changeStatus: 'product/business-classify/change-status'
            }
        }
    },
    created() {
        this.getDataList()
    },
    methods: {
        govideo(id) {
            this.$router.push('/liveBor/live/video/' + id)
        }
    }
}
</script>

<style lang="scss" scoped>
    .el-pagination {
        margin-top: 20px;
    }
    .down {
        display: flex;
        flex-direction: column;
        width: 80px;
    }
    .del {
        margin-left: 0;
        margin-top: 2px;
    }
</style>
